<template>
  <div class="role-add-root">
    <el-dialog
        title="添加系统角色"
        :visible.sync="dialogVisible"
        width="30%"
        :close="close"
        :before-close="close">

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="角色名称">
          <el-input v-model="form.roleName" style="width: 65%" clearable></el-input>
        </el-form-item>
        <el-form-item label="角色类型">
          <el-select v-model="form.type" clearable placeholder="请选择">
            <el-option v-for="item in roleTypes" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="addRole">添 加</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from "../../api/api";
import {RoleEnum} from "../../common/RoleEnum";
export default {
  name: "RoleAdd",
  props: ['roleTypes'],
  data() {
    return {
      // 对话框标志位
      dialogVisible: true,
      //
      form: {}
    }
  },
  mounted() {
  },
  methods: {
    close() {
      this.$emit("close");
    },
    //
    addRole() {
      let param = JSON.parse(JSON.stringify(this.form));
      this.$post(Api.sysRole.upsert, param).then(res => {
        let data = res.data;
        if (!data.success) {
          this.$message.error(data.msg);
        } else {
          this.$message.success(data.msg);
        }
        this.close();
      })
    },
    //
    change() {
      if (this.form.type === RoleEnum.ADMIN && !this.$hasAdmin) {
        this.form.type = null;
        this.$message.closeAll();
        this.$message.warning({
          showClose: true,
          message: "你没有添加管理员的权限!"
        });
      }
    },
  }
}
</script>

<style scoped>

</style>
